<template>
  <div>
    <!-- 顶部导航栏 -->
    <!-- <el-header class="header" height="60px">
        <div class="logo-container">
          <img src="/src/assets/imgs/dems/logo.png" alt="逾进科技" class="logo" />
        </div>
  
        <div class="header-right">
          <el-select v-model="searchQuery" filterable placeholder="请输入" style="width: 240px; margin-right: 20px"
            @change="changeItem" :clearable="true">
            <el-option v-for="item in twoMenu" :key="item.id" :label="item.name" :value="item.id"
              @click="selectItem(item)" />
          </el-select>
  
          <div class="header-controls">
            <el-dropdown class="admin-dropdown">
              <span class="admin-info">
                <span>{{ factory }}<el-icon><CaretBottom /></el-icon></span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="item in factoryList" :key="item.id" :value="item.id"
                    @click="selectFactory(item)">{{ item.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
  
            <LocaleDropdown style="margin: 0 20px;width:80px;" />
  
            <el-dropdown class="admin-dropdown">
              <span class="admin-info">
                <i class="el-icon-user"></i>
                <span>admin</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div @click="drawer = true" class="menu-box">
              <img src="/src/assets/imgs/dems/menu.png" alt="" />
            </div>
          </div>
        </div>
      </el-header> -->
    <el-card class="sy_index">
      <template #header>
        <div class="card-header"> 首页 </div>
      </template>
      <div class="sy">
        <!-- 概览部分 -->
        <h2 class="section-title">概览</h2>
        <el-row :gutter="20">
          <!-- 客户数卡片 -->
          <el-col :xs="24" :sm="12" :md="6">
            <el-card shadow="hover" class="overview-card">
              <div class="card-icon-wrapper"></div>
              <div class="card-content">
                <div class="stat-item">
                  <div class="stat-label">客户数</div>
                  <div class="stat-value">3</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">近7天新增</div>
                  <div class="stat-value trend-up" style="color: #367baf">2
                     <el-icon size="22" color="#67c23a"><Top /></el-icon>
                  </div>
                 
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 处理中订单卡片 -->
          <el-col :xs="24" :sm="12" :md="6">
            <el-card shadow="hover" class="overview-card">
              <div class="card-icon-wrapper"></div>
              <div class="card-content">
                <div class="stat-item">
                  <div class="stat-label">处理中订单</div>
                  <div class="stat-value">7</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">异常订单</div>
                  <div class="stat-value" style="color: #e89e42">2</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">需求变更</div>
                  <div class="stat-value" style="color: #e89e42">1</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 近30天询单数卡片 -->
          <el-col :xs="24" :sm="12" :md="6">
            <el-card shadow="hover" class="overview-card">
              <div class="card-icon-wrapper"></div>
              <div class="card-content">
                <div class="stat-item">
                  <div class="stat-label">近30天询单数</div>
                  <div class="stat-value" style="color: #367baf">20</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">处理中</div>
                  <div class="stat-value" style="color: #367baf">2</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">响应超时</div>
                  <div class="stat-value" style="color: #367baf">1</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 近30天咨询数卡片 -->
          <el-col :xs="24" :sm="12" :md="6">
            <el-card shadow="hover" class="overview-card">
              <div class="card-icon-wrapper"></div>
              <div class="card-content">
                <div class="stat-item">
                  <div class="stat-label">近30天咨询数</div>
                  <div class="stat-value" style="color: #367baf">20</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">平均响应时长</div>
                  <div class="stat-value value-small-font" style="color: #367baf">2.68分钟</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 团队销售简报 -->
      <h2 class="section-title">团队销售简报</h2>
      <div class="sales-briefing">
        <el-button-group class="time-range-selector">
          <el-button
            v-for="range in timeRanges"
            :key="range"
            :type="activeTimeRange === range ? 'primary' : 'default'"
            @click="activeTimeRange = range"
          >
            {{ range }}
          </el-button>
        </el-button-group>

        <el-row :gutter="16" class="sales-stats-row">
          <el-col :xs="12" :sm="8" :md="4" v-for="stat in salesData" :key="stat.title">
            <el-card shadow="hover">
              <div class="stat-block" :class="{ highlight: stat.highlight }">
                <div>
                  <div class="stat-block-title">{{ stat.title }}</div>
                  <div class="stat-block-value"
                    >{{ stat.value }}
                    <span v-if="stat.unit" style="color: #333; font-size: 12px">{{
                      stat.unit
                    }}</span></div
                  >
                </div>
                <div class="stat-block-comparison">
                  <div class="tb">同比</div>
                  <div class="comparison-value"> {{ stat.comparison }}% 
                    <el-icon size="22" color="#67c23a" style="margin-left: 5px;"><Bottom /></el-icon>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 我的应用 -->
    <h2 class="section-title" style="margin-top: 20px">我的应用</h2>
    <el-card>
      <!-- 置顶应用 -->
      <div class="top_application">
        <h2 style="font-size: 12px">置顶应用</h2>
        <span style="color: #aaa; font-size: 12px">目前没有设置置顶应用</span>
      </div>
      <!-- 应用集市 -->
      <div class="app-market">
        <h2 style="font-size: 12px">应用集市</h2>
        <el-row :gutter="20">
          <el-col
            v-for="item in appList"
            :key="item.title"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <el-card shadow="hover" class="app-card" @click="handleClick">
              <div class="title_wrapper">
                <el-icon :size="40" color="#409EFF">
                  <component :is="item.icon" />
                </el-icon>
                <div>{{ item.title }}</div>
              </div>

              <div class="desc">{{ item.desc }}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 配置中心 -->
      <div>
        <h2 style="font-size: 12px">配置中心</h2>
        <div class="configuration_center">
          <div class="every" v-for="item in configurationList" :key="item.title">
            <div class="title_wrapper">
              <!-- <el-icon :size="40" color="#409EFF">
                <component :is="item.icon" />
              </el-icon> -->
              <div
                style="
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  background: #d9d9d9;
                  line-height: 40px;
                  text-align: center;
                "
              >
                icon
              </div>
              <div style="margin-left: 16px">{{ item.title }}</div>
            </div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Document, Avatar, ShoppingCart, ChatDotSquare, Top,Bottom } from '@element-plus/icons-vue'
import { getInfo } from '@/api/login'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useRouter } from 'vue-router'

const { push, replace } = useRouter()

const userStore = useUserStore()
const tagsViewStore = useTagsViewStore()

const props = defineProps({
  icon: [String, Object],
  title: String,
  desc: String,
  path: String
})

const { t } = useI18n()

const loginOut = async () => {
  try {
    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
      confirmButtonText: t('common.ok'),
      cancelButtonText: t('common.cancel'),
      type: 'warning'
    })
    await userStore.loginOut()
    tagsViewStore.delAllViews()
    replace('/login?redirect=/index')
  } catch {}
}

const handleClick = () => {
  ElMessage.success(`即将跳转到：${props.title}`)
}

// 时间范围选择
const timeRanges = ['今日', '近7天', '近30天']
const activeTimeRange = ref('今日')

// 销售简报数据
const salesData = ref([
  { title: '新增客户数', value: 3, unit: '人', comparison: -50, highlight: false },
  { title: '新增合同数', value: 3, unit: '份', comparison: -50, highlight: false },
  { title: '新增订单数', value: 3, unit: '单', comparison: -50, highlight: false },
  { title: '新增询单数', value: 3, unit: '单', comparison: -50, highlight: false }
  // { title: '合同金额', value: '30,002,000', unit: '$', comparison: -50, highlight: true },
  // { title: '回款金额', value: '30,002,000', unit: '$', comparison: -50, highlight: true }
])

onMounted(() => {
  getMenu()
})

const getMenu = () => {
  getInfo().then((res) => {
    console.log(res)
  })
}

const appList = [
  {
    icon: User,
    title: '客户管理',
    desc: '客户的统一创建，跟进'
  },
  {
    icon: Document,
    title: '合同管理',
    desc: '合同的统一创建，更新，归档'
  },
  {
    icon: Avatar,
    title: '客户账号管理',
    desc: '客户账号统一创建，管理'
  },
  {
    icon: ShoppingCart,
    title: '订单管理',
    desc: '订单创建，跟踪，异常处理'
  },
  {
    icon: ChatDotSquare,
    title: '询单管理',
    desc: '客户咨询产品，性能，交货日期'
  }
]
const configurationList = ref([
  {
    icon: User,
    title: '用户管理',
    desc: '用户统一创建，管理'
  },
  {
    icon: Document,
    title: '产品BOM数据',
    desc: '基础产品，BOM等基础数据同步'
  },
  {
    icon: Avatar,
    title: '工厂数据',
    desc: '工厂信息，生产品类品号数据同步'
  },
  {
    icon: Avatar,
    title: '生产工单数据',
    desc: '排程排产/工单报工/质检报告数据同步'
  },
  {
    icon: Avatar,
    title: '质量检测数据',
    desc: '物流配送，实时归集，物流状态数据同步'
  },
  {
    icon: Avatar,
    title: '物流配送数据',
    desc: '物流配送，实时归集，物流状态数据同步'
  },
  {
    icon: Avatar,
    title: '物流配送数据',
    desc: '物流配送，实时归集，物流状态数据同步'
  }
])
</script>

<style scoped lang="less">
.dashboard-container {
  padding: 20px;
  //  margin-top:60px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  background-color: #fff;
  .sy {
  }
}
:deep(.el-card__header) {
  padding: 10px;
  font-weight: bold;
  margin: 0 5px;
}
.configuration_center {
  display: grid;
  grid-template-columns: (repeat(auto-fit, minmax(240px, 1fr)));
  gap: 20px;
  grid-auto-flow: row;
  .every {
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    cursor: pointer;
  }
  .every:hover {
    box-shadow: var(--el-box-shadow-lighter);
  }
}
.title_wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  i {
    margin-right: 10px;
  }
}

.section-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

/* --- 概览卡片样式 --- */
.overview-card {
  margin-bottom: 20px;
}

:deep(.el-card__body) {
  //display: flex;
  //align-items: center;
  width: 100%;
  padding: 15px !important;
}

.card-icon-wrapper {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  background-color: #f0f2f5;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-content {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  padding: 15px;
  overflow: hidden;
}

.stat-item {
  text-align: left;
}

.stat-label {
  position: relative; /* 为徽标定位提供上下文 */
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  font-weight: 700;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.value-small-font {
  font-size: 14px;
}

.badge-item {
  line-height: 1;
}

.trend-up {
  color: #67c23a;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* --- 销售简报样式 --- */
.sales-briefing {
  background-color: #fff;
  border-radius: 4px;
}

.time-range-selector {
  margin-bottom: 20px;
}

.stat-block {
  // padding: 16px;
  text-align: center;
  background-color: #fff;
  // border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.stat-block.highlight {
  background-color: #f0f2f5;
}

.stat-block-title {
  margin-bottom: 12px;
  font-size: 14px;
  color: #909399;
}

.stat-block-value {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #367baf;
}

.stat-block-comparison {
  // display: flex;
  font-size: 14px;
  color: #909399;
  justify-content: center;
  gap: 8px;
  align-items: center;
  .tb {
    margin-bottom: 12px;
  }
}

.comparison-value {
  display: flex;
  align-items: center;
  color: #02b469;
  font-weight: 600;
  // margin-top: 20px;
}

.app-card {
  cursor: pointer;
  margin-bottom: 20px;
}
.icon-wrapper {
  margin-bottom: 12px;
  display: flex;
}
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.desc {
  font-size: 13px;
  color: #7b7b7b;
}

.app-market {
  background-color: #fff;
  margin: 20px 0;
}
h2 {
  margin-bottom: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
  z-index: 100;
  position: fixed; // 新增
  top: 0; // 新增
  left: 0; // 新增
  right: 0; // 新增
  width: 100%; // 新增
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 145px;
  margin-right: 10px;
}

.logo-text {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

.header-right {
  display: flex;
  align-items: center;
}

.search-input {
  width: 200px;

  margin-right: 20px;
}

.header-controls {
  display: flex;
  align-items: center;
}

.factory-select,
.language-select {
  margin-right: 20px;
  width: 150px;
}

.admin-dropdown,
.layout-dropdown {
  margin-left: 15px;
}
</style>
